// @flow
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import cx from 'classnames';
import './Menu.scss';

type menuItem = {
    to: string,
    key: number,
    name: string
};
type Props = {
    menuData: Array<menuItem>,
    activePage: string
};

class Menu extends Component<Props> {
    render() {
        const { menuData, activePage } = this.props;
        const items = [];
        menuData.map(item => {
            return items.push(
                <Link
                    className={cx({ active: activePage === item.to })}
                    key={item.key}
                    to={item.to}
                >
                    {item.name}
                </Link>
            );
        });

        return (
            <Fragment>
                <ul className="Menu">{items}</ul>
            </Fragment>
        );
    }
}

export default Menu;
